import { JsonProperty, Graph } from '/@/utils/graph/Graph';
import { loadExtShapes } from '../../design.api';

/**
 * 图形加载类
 */
class RpaEditor {
  // 定义图形
  private shapes = [
    {
      name: 'start',
      title: '开始',
      image:
        '',
      hidden: true,
      disabled: false,
      defaultAdd: true,
    },
    {
      name: 'request',
      image:
        '',
      title: '开始抓取',
      desc: '抓取静态HTML页面或者API接口，抓取结果存为resp变量中。<br/>支持方法参考命令提示。',
    },
    {
      name: 'variable',
      image:
        '',
      title: '定义变量',
      desc: '定义流程变量。<br/>定义变量有先后顺序，先定义变量后续可以使用，拖动可以交换变量顺序。',
    },
    {
      name: 'loop',
      image:
        '',
      title: '循环',
      desc: '',
    },
    {
      name: 'forkJoin',
      image:
        '',
      title: '执行结束',
      desc: '',
    },
    {
      name: 'comment',
      image:
        '',
      title: '注释',
      desc: '仅仅是注释,毫无作用',
    },
    {
      name: 'output',
      image:
        '',
      title: '输出',
      desc: '输出流程中的变量结果（仅测试下有用）',
    },
    {
      name: 'executeSql',
      image:
        '',
      title: '执行SQL',
      desc: '执行sql，需配置数据源，sql执行结果存于变量rs中。<br/>语句类型为：select，返回:List&lt;Map&lt;String,Object&gt;&gt;<br/>语句类型为：selectOne，返回:Map&lt;String,Object&gt;<br/>语句类型为：selectInt，返回:Integer<br/>语句类型为：insert、update、delete，返回:int，批量操作返回int数组<br/>sql中变量必须用 # # 包裹，如：#${title}#',
    },
    // {
    //   name: 'script',
    //   image: '',
    //   title: '执行脚本',
    //   desc: '单独执行脚本方法'
    // },
    {
      name: 'function',
      image:
        '',
      title: '执行函数',
      desc: '单独执行函数方法，结果不保存为变量',
    },
    {
      name: 'process',
      image:
        '',
      title: '子流程',
      desc: '执行其他spiderFlow流程，父子流程变量共享',
    },
    {
      name: 'jvppeteer',
      image:
        '',
      title: 'jvppeteer',
      desc: 'jvppeteer',
    },
    {
      name: 'mailboxsendhtml',
      image:
        '',
      title: '电子邮箱发送',
      desc: '电子邮箱发送',
    },
    {
      name: 'ocr',
      image:
        '',
      title: 'OCR识别',
      desc: 'OCR识别',
    },


  ];

  private graph: Graph;
  private toolbarContainer: HTMLDivElement;

  constructor(options) {
    this.graph = new Graph({
      container: options.graphContainer,
      handleCellChangedListener: options.handleCellChangedListener,
    });
    this.toolbarContainer = options.toolbarContainer;
    this.init();
  }

  private addShape(shape) {
    var image = new Image();
    image.src = shape.image;
    image.title = shape.title;
    image.id = shape.name;
    image.onclick = function (ev) {
      if (shape.desc) {
      }
    };
    if (!shape.hidden) {
      this.toolbarContainer.appendChild(image);
    }

    if (!shape.disabled) {
      this.graph.addShape(shape.name, shape.title || 'Label', image, shape.defaultAdd);
    }
  }

  /**
   * 加载图形
   */
  async init() {
    const _this = this;
    Array.from(this.toolbarContainer.children).forEach(function (child) {
      _this.toolbarContainer.removeChild(child);
    });

    for (let i = 0, len = this.shapes.length; i < len; i++) {
      const shape = this.shapes[i];
      this.addShape(shape);
    }
    // const datas = await loadExtShapes();
    // if (datas) {
    //   for (var i = 0; i < datas.length; i++) {
    //     const shapeItem = datas[i];
    //     let list = this.shapes.filter(p=> p.name == shapeItem.name);
    //     if(list.length == 0){
    //       this.addShape(shapeItem);
    //       const image = new Image();
    //       image.src = shapeItem.image;
    //       image.title = shapeItem.title;
    //       this.graph.addShape(shapeItem.name, shapeItem.title || 'Label', image, false);
    //     }
    //   }
    // }
  }

  getGraph() {
    return this.graph;
  }

  /**
   * 获得toolBar宽度
   * @returns
   */
  getSlideBarSize() {
    const height = this.toolbarContainer.offsetHeight;
    const total = this.toolbarContainer.getElementsByTagName('img').length;
    let col = Math.floor(height / 46);
    let w = Math.ceil(total / col) * 50;
    return w;
  }

  destroy() {
    this.graph.destroy();
  }
}

export { RpaEditor };
